<template>
	<view class="newCart">
		<view class="cartTypeOne">
			<div class="oneTitle">
				<text>{{ item.review_info[carIndex].title }}</text>
			</div>
			<view class="oneImgList">
					<image v-for="url in item.review_info[carIndex].img"
					:key="url"
					:src="url"
					>
			</view>
			<view class="oneComment">
				<text>评论{{item.review_info[carIndex].comment_count}}</text>
				<text>{{item.review_info[carIndex].time}}</text>
			</view>
		</view>
		<view class="cartTypeTwo">
			<div class="twoTitle"><text>{{item.video_info[carIndex].title}}</text></div>
			<view class="twoImgList">
				<image
					:src="item.video_info[carIndex].img"
				></image>
			</view>
			<view class="twoComment">
				<text>评论{{item.video_info[carIndex].comment_count}}</text>
				<text>{{item.video_info[carIndex].time}}</text>
			</view>
		</view>
		<view class="cartTypeThree">
			<view class="threeLeft">
				<view class="leftTop">
					<text>
						{{item.news_info[carIndex].title}}
					</text>
				</view>
				<view class="threeComment">
					<text>评论{{item.news_info[carIndex].comment_count}}</text>
					<text>{{item.news_info[carIndex].time}}</text>
				</view>
			</view>
			<view class="threeRight">
				<image
					:src="item.news_info[carIndex].img"
				></image>
			</view>
		</view>
	</view>
</template>

<script>
import {getIndexData} from '@/server/home/home.js'
export default {
	props: {
		carIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			item: {}
		}
	},
	async created() {
		const res = await getIndexData()
		this.item = res.data
		// this.item['hot_info'] = res.data.hot_info[0]
		// this.item['news_info'] = res.data.news_info[0]
		// this.item['review_info'] = res.data.review_info[0]
		console.log(this.item)
	}
}
</script>

<style lang="less" scoped>
.newCart {
	box-sizing: border-box;
	padding: 30upx;

	.cartTypeOne {
		.oneTitle {
			font-size: 36upx;
			font-weight: 600;
		}
		.oneImgList {
			display: flex;
			justify-content: space-between;
			margin-top: 20upx;
			image {
				width: 210upx;
				height: 200upx;
				border-radius: 5px;
			}
		}
		.oneComment {
			margin-top: 20upx;
			padding-bottom: 40upx;
			border-bottom: 1px solid #e3e3e3;
			text {
				margin-left: 50upx;
				color: #6f6d6d;
				font-size: 28upx;
			}
		}
	}
	.cartTypeTwo {
		margin-top: 30upx;
		.twoTitle {
			font-size: 36upx;
			font-weight: 600;
		}
		.twoImgList {
			display: flex;
			justify-content: center;
			margin-top: 20upx;
			image {
				width: 642upx;
				height: 400upx;
				border-radius: 5px;
			}
		}
		.twoComment {
			margin-top: 20upx;
			padding-bottom: 40upx;
			border-bottom: 1px solid #e3e3e3;
			text {
				margin-left: 50upx;
				color: #6f6d6d;
				font-size: 28upx;
			}
		}
	}

	.cartTypeThree {
		margin-top: 50upx;
		padding-bottom: 50upx;
		display: flex;
		border-bottom: 1px solid #e3e3e3;
		.threeLeft {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.leftTop {
				font-size: 36upx;
				font-weight: 600;
			}
			.threeComment {
				text {
					margin-left: 50upx;
					color: #6f6d6d;
					font-size: 28upx;
				}
			}
		}
		.threeRight {
			image {
				width: 262upx;
				height: 250upx;
			}
		}
	}
}
</style>
